<template>
  <div>
    <div class="user-container">
      <el-card class="user-profile" shadow="hover" :body-style="{ padding: '0px' }">
        <div class="user-profile-bg"></div>
        <div class="user-avatar-wrap">
          <el-avatar class="user-avatar" :size="120" :src="info.avatarUrl" alt="Preview Image"/>
        </div>
        <div class="user-info">
          <div class="info-name"><span v-if="admin != null">{{ admin.fullName }}</span></div>
          <div class="info-desc">很高兴见到你</div>
        </div>
        <div class="user-footer"></div>
      </el-card>
      <el-card
          class="user-content"
          shadow="hover"
          :body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }"
      >
        <el-tabs tab-position="left" v-model="activeName">
          <el-tab-pane name="label1" label="消息通知" class="user-tabpane">
            <TabsComp/>
          </el-tab-pane>
          <el-tab-pane name="label2" label="我的信息" class="user-tabpane">
            <div class="user-info-container">
              <!-- 表单部分 -->
              <div class="form-container">
                <el-form :model="info.user" ref="userForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="姓名" prop="fullName">
                    <el-input v-model="info.user.fullName"></el-input>
                  </el-form-item>
                  <el-row>
                    <el-form-item label="年龄" prop="age">
                      <el-input v-model="info.user.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                      <el-radio-group v-model="info.user.gender">
                        <el-radio label="男" value="男"></el-radio>
                        <el-radio label="女" value="女"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-row>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="info.user.email"></el-input>
                  </el-form-item>
                  <el-form-item label="电话号码" prop="phoneNumber">
                    <el-input v-model="info.user.phoneNumber"></el-input>
                  </el-form-item>
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="info.user.address"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="saveUserInfo">保存</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="label3" label="其他" class="user-tabpane">

            <el-empty description="正在开发中……" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import TabsComp from '../element/tabs_admin.vue';
import {ElMessage} from "element-plus";
import xx from "@/axios/xx";

const admin = JSON.parse(sessionStorage.getItem("admin"));
const activeName = ref('label1');

const info = reactive({

  avatarUrl: admin.avatar,
  user:{
     adminId:admin.adminId,
     fullName:admin.fullName,
     age:admin.age,
     gender:admin.gender,
     email:admin.email,
    phoneNumber:admin.phoneNumber,
     address:admin.address,
  },
});

const userForm = ref({
});

const saveUserInfo = () => {
  if (!userForm) return
  userForm.value.validate((valid) => {
    if (valid) {
      xx({
        url: "/adminInfo",
        method: "put",
        data: info.user
      }).then(res => {
        console.log(res)
        if (res.code === 200) {
          info.user = res.data
          ElMessage({
            message: res.message,
            type: 'success'
          })
        } else {
          ElMessage.error(res.message)
        }
        //关闭模态框
        info.dialogVisible = false
        info.persistForm = {}

      })
    } else {
      console.log("false")
    }})
}


</script>

<style scoped>
.user-container {
  display: flex;
}

.user-profile {
  position: relative;
}


.user-profile {
  width: 500px;
  margin-right: 20px;
  flex: 0 0 auto;
  align-self: flex-start;
}

.user-avatar-wrap {
  position: absolute;
  top: 135px;
  width: 100%;
  text-align: center;
}

.user-profile-bg {
  width: 100%;
  height: 200px;
  background-image: url('../../public/ucenter-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.user-avatar {
  border: 5px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
}

.user-info {
  text-align: center;
  padding: 80px 0 30px;
}

.info-name {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 500;
  color: #373a3c;
}

.info-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.info-desc,
.info-desc a {
  font-size: 18px;
  color: #55595c;
}

.info-icon {
  margin-top: 10px;
}

.info-icon i {
  font-size: 30px;
  margin: 0 10px;
  color: #343434;
}

.user-content {
  flex: 1;
}

.user-tabpane {
  padding: 10px 20px;
}

.crop-wrap {
  width: 600px;
  height: 350px;
  margin-bottom: 20px;
}

.crop-demo-btn {
  position: relative;
}

.crop-input {
  position: absolute;
  width: 100px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.w500 {
  width: 500px;
}

.user-footer {
  display: flex;
  border-top: 1px solid rgba(83, 70, 134, 0.1);
}

.user-footer-item {
  padding: 20px 0;
  width: 33.3333333333%;
  text-align: center;
}

.user-footer > div + div {
  border-left: 1px solid rgba(83, 70, 134, 0.1);
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>

<style>
.el-tabs.el-tabs--left {
  height: 100%;
}
</style>
